import React, { useState } from 'react';
import type { AssessmentType } from '@/types/business';

interface BusinessFilterProps {
  onSearch: (keyword: string) => void;
  onFilter: (status?: 'in_progress' | 'completed', type?: AssessmentType) => void;
}

const BusinessFilter: React.FC<BusinessFilterProps> = ({ onSearch, onFilter }) => {
  const [searchKeyword, setSearchKeyword] = useState('');
  const [statusFilter, setStatusFilter] = useState<'all' | 'in_progress' | 'completed'>('all');
  const [typeFilter, setTypeFilter] = useState<'all' | '101' | '102' | '103'>('all');

  // Handle search input change
  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setSearchKeyword(value);
    onSearch(value);
  };

  // Handle status filter change
  const handleStatusChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const value = e.target.value as 'all' | 'in_progress' | 'completed';
    setStatusFilter(value);
    
    // Only pass the status if it's not 'all'
    const status = value === 'all' ? undefined : value;
    
    // Only pass the type if it's not 'all'
    const type = typeFilter === 'all' ? undefined : typeFilter;
    
    // Ensure we're passing the correct types
    onFilter(
      status as 'in_progress' | 'completed' | undefined,
      type as AssessmentType | undefined
    );
  };

  // Handle type filter change
  const handleTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const value = e.target.value as 'all' | '101' | '102' | '103';
    setTypeFilter(value);
    
    // Only pass the status if it's not 'all'
    const status = statusFilter === 'all' ? undefined : statusFilter;
    
    // Only pass the type if it's not 'all'
    const type = value === 'all' ? undefined : value;
    
    // Ensure we're passing the correct types
    onFilter(
      status as 'in_progress' | 'completed' | undefined,
      type as AssessmentType | undefined
    );
  };

  return (
    <div className="flex flex-wrap gap-4 mb-6">
      {/* Search Input */}
      <div className="flex-1 min-w-[200px]">
        <div className="relative">
          <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-slate-500">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clipRule="evenodd" />
            </svg>
          </div>
          <input
            type="text"
            className="w-full pl-10 pr-3 py-2 border border-slate-300 rounded-md min-h-[44px] text-sm"
            placeholder="搜索业务系统或负责人..."
            value={searchKeyword}
            onChange={handleSearchChange}
          />
        </div>
      </div>
      
      {/* Status Filter */}
      <div className="w-[150px]">
        <select
          className="w-full px-3 py-2 border border-slate-300 rounded-md min-h-[44px] text-sm appearance-none bg-white"
          value={statusFilter}
          onChange={handleStatusChange}
        >
          <option value="all" >所有状态</option>
          <option value="in_progress">进行中</option>
          <option value="completed">已完成</option>
        </select>
      </div>
      
      {/* Type Filter */}
      <div className="w-[150px]">
        <select
          className="w-full px-3 py-2 border border-slate-300 rounded-md min-h-[44px] text-sm appearance-none bg-white"
          value={typeFilter}
          onChange={handleTypeChange}
        >
          <option value="all">所有类型</option>
          <option value="101">双新评估</option>
          <option value="102">涉诈评估</option>
          <option value="103">智慧中台评估</option>
        </select>
      </div>
    </div>
  );
};

export default BusinessFilter;
